<template>
	<view class="cultural-tourism">
		<view class="cultural-tourism-box" v-for="item in culturalTourismList" :key="item">
			<view class="left-scenic-tours-map">
				<image class="scenic-tours-map-src" mode="widthFix" :src="item.coverSrc" @click="toDatails(item)" />
				<view :class="item.status == 1?'active-status-text status-text' : 'status-text'" >{{ statusEnum[item.status] }}</view>
			</view>
			<view class="right-info-box">
				<view class="title-box">
					<view class="title">{{ item.title }}</view>
					<view style="display: flex; align-items: center;">
						<!-- <view class="text">景点</view> -->
						<view>
							<block v-if="item.collectsStatus">
								<view style="margin-left: 12rpx;">
									<up-button size="mini" color="#fd6200" type="primary" text="已收藏"></up-button>
								</view>
							</block>
							<block v-else>
								<view style="margin-left: 12rpx;">
									<up-button  size="mini" type="primary" text="收藏"></up-button>
								</view>
								
							</block>
						</view>
					</view>
				</view>

				<view class="favorable-comment">
					<up-icon name="star-fill" color="#fd6200" size="18" />
					<view class="favorable-comment-number">{{ item.favorableComment }}</view>
					<view class="favorable-comment-text">
						{{ item.favorableComment >= 4? '很好' : item.favorableComment >= 3? '好' : '一般' }}
					</view>
				</view>

				<view class="type-and-location-box">
					<view class="type-text">{{ item.type }}</view>
					<view class="location-text">{{ item.location }}</view>
				</view>

				<view class="tags-box">
					<view v-for="tagItem in item.tags">{{ tagItem }}</view>
				</view>
				
				<view class="data-info-box">
					<view class="item-box">
						<u-icon size="22px" color="red" name="heart-fill" />
						<text>{{ item.tatalCollects }}</text>
					</view>
					<view class="item-box" style="margin-left: 80rpx;">
						<u-icon size="22px" color="#000" name="eye-fill" />
						<text>{{ item.totalPreviews }}</text>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
		import { jumpToCulturalTourismDetails } from '@/utils/jump.js'
	import { defineProps, ref } from 'vue';
	
	const props = defineProps({
		tabsId: String || null
	});
	
	const statusEnum = [ '免费', '收费' ]
	
	// 文旅推荐
	const culturalTourismList = ref([
		{
			id: 1,
			collectsStatus: true, // 收藏状态
			coverSrc: 'https://imgessl.kugou.com/stdmusic/240/20240326/20240326151433974976.jpg', // 景区图片
			title: '青城山', // 景区名
			favorableComment: 4, // 评分
			type: '旅游', // 类型
			location: '都江堰', // 景区名地名
			tatalCollects: 1230, // 收藏总数
			totalPreviews: 123456, // 浏览量
			tags: ['爬山', '美食', '拍摄'], // 标签
			status: 0, // 收费状态
		},
		{
			id: 2,
			collectsStatus: false, // 收藏状态
			coverSrc: 'https://imgessl.kugou.com/stdmusic/240/20240326/20240326151433974976.jpg', // 景区图片
			title: '游乐园', // 景区名
			favorableComment: 3.5, // 评分
			type: '游乐场', // 类型
			location: '成都', // 地名
			tatalCollects: 1230, // 收藏总数
			totalPreviews: 123456, // 浏览量
			tags: ['亲子活动', '水吧', '动物'], // 标签
			status: 1, // 收费状态
		},
		{
			id: 3,
			collectsStatus: true, // 收藏状态
			coverSrc: 'https://imgessl.kugou.com/stdmusic/240/20240326/20240326151433974976.jpg', // 景区图片
			title: '九寨沟', // 景区名
			favorableComment: 2, // 评分
			type: '旅游', // 类型
			location: '川西', // 地名
			tatalCollects: 1230, // 收藏总数
			totalPreviews: 123456, // 浏览量
			tags: ['爬山', '美食', '拍摄', '爬山', '美食', '拍摄', '爬山', '美食', '拍摄'], // 标签
			status: 0, // 收费状态
		},
	])
	
	// 点击列表项
	const toDatails = (item) => {
		jumpToCulturalTourismDetails(item.title, item.id)
	}
</script>

<style lang="scss" scoped>
	.cultural-tourism {
		width: 100%;
		height: calc(100vh - 100rpx);
		// margin-top: 100rpx;
		overflow: auto;
		background-color: #f5f5f5;

		.cultural-tourism-box {
			width: 100%;
			margin-bottom: 12rpx;
			display: flex;
			padding: 24rpx;
			box-sizing: border-box;
			background-color: #fff;
			
			.left-scenic-tours-map {
				position: relative;
				width: 180rpx;
				height: 180rpx;
				margin-right: 24rpx;
				
				.scenic-tours-map-src {
					width: 180rpx;
					height: 180rpx;
					border-radius: 16rpx 16rpx  16rpx 8rpx;
				}
				
				.status-text {
					position: absolute;
					bottom: -1rpx;
					left: 0;
					box-sizing: border-box;
					padding: 4rpx 8rpx;
					font-size: 20rpx;
					color: #fff;
					background-color: #fa6205;
					border-radius: 0 0 0 8rpx;
				}
				
				.active-status-text {
					background-color: #f63204 !important;
				}
			}

			

			.right-info-box {
				width: calc(100% - 180rpx - 24rpx);

				.title-box {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.title {
						font-size: 28rpx;
						font-weight: 700;
					}

					.text {
						box-sizing: border-box;
						padding: 4rpx 8rpx;
						font-size: 20rpx;
						color: #fff;
						background-color: #fa6205;
						border-radius: 6rpx;
					}
				}

				.favorable-comment {
					margin-top: 12rpx;
					width: 100%;
					display: flex;
					align-items: center;

					.favorable-comment-number {
						margin-left: 6rpx;
						font-size: 26rpx;
						color: #fd6200;
					}

					.favorable-comment-text {
						margin-left: 12rpx;
						font-size: 20rpx;
						color: #fd6200;
					}
				}

				.type-and-location-box {
					margin-top: 12rpx;
					width: 100%;
					display: flex;
					align-items: center;

					.type-text,
					.location-text {
						font-size: 20rpx;
						color: #606060;
					}

					.location-text {
						margin-left: 32rpx;
					}
				}

				.tags-box {
					margin-top: 12rpx;
					width: 100%;
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					view {
						font-size: 20rpx;
						padding: 4rpx 8rpx;
						background-color: #fff;
						border: 1rpx solid #5f5f61;
						border-radius: 6rpx;
						margin-right: 12rpx;
						margin-bottom: 12rpx;
						color: #5f5f61;
					}
				}
				
				.data-info-box {
					width: 100%;
					box-sizing: border-box;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					
					.item-box {
						display: flex;
						align-items: center;
						
						text {
							font-size: 24rpx;
							margin-left: 8rpx;
						}
					}
				}

			}
		}


	}
</style>